<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="css/stylesheet.css" type="text/css"/>   
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
    <script src="lm.threejs.client.js"></script>
    <script type="text/javascript">
  var response = {};
  var statusFld;
  
  window.onload = function() {
    statusFld = document.getElementById("status");
  };
    </script>
    <script defer="defer">
      var angularSpeedAroundZ = 0; // yaw
      var angularSpeedAroundY = 0; // roll
      var angularSpeedAroundX = 0; // pitch
      // revolutions per second
      var angularSpeed = 0.2; 
      var lastTime = 0;
 
      // this function is executed on each animation frame
      function animate(){
        // update
        var time = (new Date()).getTime();
        var timeDiff = time - lastTime;
        var angleChangeX = angularSpeedAroundX * timeDiff * 2 * Math.PI / 1000;
        var angleChangeY = angularSpeedAroundY * timeDiff * 2 * Math.PI / 1000;
        var angleChangeZ = angularSpeedAroundZY * timeDiff * 2 * Math.PI / 1000;
        cube.rotation.x += angleChangeX;
        cube.rotation.y += angleChangeY;
        cube.rotation.z += angleChangeZ;
        
        lastTime = time;
 
        // render
        renderer.render(scene, camera);
 
        // request new frame
        requestAnimationFrame(function(){
            animate();
        });
      }

      // renderer
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
 
      // camera
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      camera.position.z = 500;
 
      // scene
      var scene = new THREE.Scene();
                
      // cube
      var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), new THREE.MeshNormalMaterial());
      cube.overdraw = true;
      scene.add(cube);
 
      // start animation
      animate();
    </script>
    <div id="status" style="padding:5px; background:#ddd; border-radius:5px; overflow-y: scroll; border:1px solid #CCC; margin-top:10px; height: 80px;">
      <!--i>Status will go here when needed...</i-->
    </div>
  </body>
</html>      